<template>
	<view class="container-white">
		<view class="head flex-box" style="padding: 30upx 20upx;">
			<view>
				<text v-if="topic.quesType == 1">单选题</text>
				<text v-if="topic.quesType == 2">多选题</text>
				<text v-if="topic.quesType == 3">判断题</text>
			</view>
			<view>{{idx+1}}/{{totalCount}}</view>
		</view>

		<view class="topic-box">
			<rich-text v-if="topic.info" :nodes="topic.info" class="questions"></rich-text>
			<view class="answer">
				<view class="options" v-for="(item,index) in topic.optionsBeans" @click="checkOptions(index)" :key="index">
					<view v-if="topic.hidden">
						<view v-if="topic.quesType == 3" class="stide" :class="item.checked?(item.status?'correct':'mistake'):(item.status?'correct':'')">
							<image :src="item.checked?(item.status?'/static/icon/correct.png':'/static/icon/error.png'):(item.status?'/static/icon/correct.png':'')"
							 style="width: 60upx;height: 60upx;" />
						</view>
						<view v-else class="stide" :class="item.checked?(item.status?'correct':'mistake'):(item.status?'correct':'')">
							<view v-if="!item.checked">{{item.key}}</view>
							<image v-else :src="item.status?'/static/icon/correct.png':'/static/icon/error.png'" style="width: 60upx;height: 60upx;" />
						</view>
					</view>
					<view v-else>
						<view v-if="topic.quesType == 3" class="stide" :class="item.checked === true?'isCheck':''"></view>
						<view v-else class="stide" :class="item.checked === true?'isCheck':''">{{item.key}}</view>
					</view>
					<view style="flex:1">{{item.option}}</view>
				</view>
			</view>
		</view>

		<view class="topic-box">
			<button v-if="topic.quesType == 2" type="primary" size="mini" class="primary" style="width: 200upx;margin-right: 20upx;"
			 @click="selectAnsw">确定</button>
			<view v-if="topic.hidden" style="margin-top: 20upx;">
				<view style="font-size:28upx;color: #999999;">矿校云提醒您</view>
				<view class="flex-box">
					<view v-if="topic.quesType == 3" style="flex: 1;">
						正确答案：
						<text style="color: #02A8F4;">{{topic.rightAnsw == 'A'?'正确':'错误'}}</text>
					</view>
					<view v-else style="flex: 1;">
						正确答案：
						<text style="color: #02A8F4;">{{topic.rightAnsw}}</text>
					</view>
					<view style="flex: 1;">
						您的答案：
						<text style="color: #02A8F4;">{{topic.selfAnsw}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="footer" v-if="totalCount !== 1">
			<button v-if="idx>0 || idx == totalCount-1" type="primary" class="primary footer-btn" @click="goPrevious">上一题</button>
			<view v-if="idx>0 && idx<totalCount-1" class="cut-off"></view>
			<button v-if="idx<totalCount-1" type="primary" class="primary footer-btn" @click="goNext">下一题</button>
		</view>
	</view>
</template>

<script>
	import {
		post_md5
	} from '../../common/request'
	import {
		formatSeconds,
		setNavTitle
	} from './../../common/common'
	var time = 0
	export default {
		data() {
			return {
				idx: 0,
				topicList: [],
				topic: {},
				totalCount: 0,
				examId: null,
				examType: '',
				type: null,
				useransw: ''
			}
		},
		onLoad(options) {
			this.examType = options.examType
			this.getTopic()
			let title = ''
			if (options.examType == '1') {
				title = '正式考试'
			} else if (options.examType == '2') {
				title = '模拟考试'
			} else if (options.examType == '3') {
				title = '三违考试'
			} else if (options.examType == '4') {
				title = '每日一题'
			} else {
				title = '专业提升'
			}
			setNavTitle('我的收藏-' + title)
		},
		onNavigationBarButtonTap() {
			this.collect()
		},
		methods: {
			// 获取题目
			getTopic() {
				const params = {
					userId: uni.getStorageSync('userId'),
					page: this.idx + 1,
					examType: this.examType
				}
				post_md5('/usercenter-app/collect/getcollectquesbyexamtype', params).then(
					res => {
						this.topic = res.data.list[0]
						// this.topic.optionsBeans = JSON.parse(this.topic.options || '{}')
						this.totalCount = res.data.totalCount
						this.topicList.push(this.topic)
						if (this.topic.rightAnsw !== null || this.topic.rightAnsw !== '') {
							this.topic.rightAnsw = this.topic.rightAnsw.replace(/\s*/g, '')
						}
						this.selectCollect()
					}
				)
			},

			// 选择选项
			checkOptions(index) {
				if (!this.topic.hidden) {
					let data = this.topic.optionsBeans
					if (this.topic.quesType === 2) {
						data[index].checked = !data[index].checked
						this.topic.selfAnsw = ''
						this.topic.selfAnsw = data.map(x => x.checked ? x.key : '').join('')
					} else {
						this.topic.hidden = true
						if (this.topic.quesType == 1) {
							this.topic.selfAnsw = data[index].key
						} else {
							this.topic.selfAnsw = data[index].option
						}
						data[index].checked = true
						data.forEach(x => {
							x.status = this.topic.rightAnsw == x.key
						})
					}
				}
			},

			// 下一题
			goNext() {
				this.idx = this.idx + 1
				if (this.idx < this.topicList.length) {
					this.topic = this.topicList[this.idx]
				} else {
					this.getTopic()
				}
			},
			// 上一题
			goPrevious() {
				this.idx = this.idx - 1
				this.topic = this.topicList[this.idx]
			},

			// 多选题查看答案
			selectAnsw() {
				this.topic.hidden = true
				let data = this.topic.optionsBeans
				var answ = []
				for (let i in this.topic.rightAnsw) {
					answ.push(this.topic.rightAnsw.charAt(i))
				}
				for (let i in answ) {
					for (let j in data) {
						if (answ[i] == data[j].key) {
							data[j].status = true
						}
					}
				}
				this.$forceUpdate()
			},

			// 查询收藏信息
			selectCollect() {
				const params = {
					examType: this.examType,
					type: 3,
					userId: uni.getStorageSync('userId'),
					idInfo: this.topic.id
				}
				post_md5('/usercenter-app/collect/iscollect', params, false).then(res => {
					if (res.data == -1) {} else {
						// #ifdef APP-PLUS
						this.$mp.page.$getAppWebview()
						var webView = this.$mp.page.$getAppWebview()
						webView.setTitleNViewButtonStyle(0, {
							text: '\ue6c8'
						})
						this.topicList[this.idx].collId = res.data
						// #endif
					}
				})
			},

			// 收藏
			collect() {
				// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview()
				if (this.topic.collId) {
					const params = {
						id: this.topic.collId
					}
					post_md5('/usercenter-app/collect/cancelcollect', params).then(res => {
						webView.setTitleNViewButtonStyle(0, {
							text: '\ue603'
						})
						this.getTopic()
						this.topicList.splice(this.idx, 1)
						uni.showToast({
								title: '取消收藏',
								icon: 'none'
							},
							500
						)
					})
				} else {
					const params = {
						examType: this.examType,
						type: this.examType,
						userId: uni.getStorageSync('userId'),
						idInfo: this.topic.id
					}
					post_md5('/usercenter-app/collect/collectInfo', params, false).then(
						res => {
							webView.setTitleNViewButtonStyle(0, {
								text: '\ue6c8'
							})
							this.topicList[this.idx].collId = res.data
							uni.showToast({
									title: '收藏成功',
									icon: 'none'
								},
								500
							)
						}
					)
				}
				// #endif
			}
		}
	}
</script>

<style>
	.head {
		border-top: 1px solid #ededed;
	}

	.menu {
		display: flex;
		font-size: 22upx;
		font-weight: 400;
		color: #333333;
		padding: 10upx 100upx;
		margin: 1px 0;
		border-bottom: 1px solid #ededed;
		text-align: center;
	}

	.menu-icon {
		width: 42upx;
		height: 42upx;
	}

	.topic-box {
		padding: 20upx;
		font-size: 28upx;
		font-weight: normal;
		color: #333333;
		line-height: 60upx;
	}

	.correct {
		background: #3ed325;
		color: #ffffff;
		border: 1px #3ed325 solid;
	}

	.mistake {
		background: #ec6663;
		color: #ffffff;
		border: 1px #ec6663 solid;
	}

	.footer {
		height: 98upx;
		font-size: 28upx;
		background: #02a8f4;
	}
</style>
<style scoped>
	.isCheck {
		background: #02a8f4;
		color: #ffffff;
	}
</style>
